<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        width: 34.333333%;
        float: right;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        white-space: nowrap;
    }
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        width: 100%;
        text-align: right;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-inline {
        padding: 5px 0;
    }
</style>

<template>
    <div class="organization">
        <div>
            <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加物流公司</a>
        </div>
        <form class="layui-form">
        <div class="layui-row">
            <div  class="layui-col-lg4 select-item" style="text-align: right">

                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" v-model="searchName" placeholder="名称/商务联系人/商务电话" class="layui-input key">
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
            </div>
        </div>


        </form>

        <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
        <table     class="layui-table layui-form">

            <thead>
            <tr>
                <th width="300px"> 名称</th>
                <th width="150px">注册地址 </th>
<!--                <th width="250px">详细地址</th>-->
<!--                <th :width="persionSize()">法人</th>-->
                <th :width="persionSize()">商务联系人</th>
                <th :width="persionSize()">商务电话</th>
                <th :width="persionSize()">商务邮箱</th>

<!--                <th :width="persionSize()">收货联系人</th>-->
<!--                <th :width="persionSize()">收货电话</th>-->
<!--                <th :width="persionSize()">财务联系人</th>-->
<!--                <th :width="persionSize()">财务电话</th>-->
<!--                <th :width="persionSize()">财务邮箱</th>-->
<!--                <th :width="AmountSize()">注册资金</th>-->

<!--                <th  :width="AmountSize()">应收账款</th>-->
<!--                <th :width="AmountSize()" >应付账款</th>-->
<!--                <th :width="AmountSize()">余额</th>-->

<!--                <th width="150px">注册地址 </th>-->
<!--                <th width="250px">详细地址</th>-->
                <th width="180px">备注</th>
                <th :width="persionSize()">创建人</th>
                <th width="150px">创建时间</th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody>
                <tr class="id9" v-for="(val, index) in customers" :key="val.guid">
                    <td>{{val.name}}</td>
                    <td>{{val.province}}-{{val.city}}-{{val.district}}</td>
                    <td>{{val.manager}}</td>
                    <td>{{val.managertel}}</td>
                    <td>{{val.memail}}</td>

<!--                    <td>{{val.contact}}</td>-->
<!--                    <td>{{val.contactno}}</td>-->
<!--                    <td>{{val.financer}}</td>-->
<!--                    <td>{{val.fintel}}</td>-->
<!--                    <td>{{val.finemail}}</td>-->
<!--                    <td>{{val.registcapital}}</td>-->
<!--                    <td>{{val.recbalance}}</td>-->
<!--                    <td>{{val.payBalance}}</td>-->
<!--                    <td>{{val.prebalance}}</td>-->
<!--                    <td>{{val.province}}-{{val.city}}-{{val.district}}</td>-->
<!--                    <td>{{val.address}}</td>-->
                    <td>{{val.remark}}</td>
                    <td>{{val.operator}}</td>
                    <td>{{val.createtime}}</td>

                    <td>  <a href="javascript:;" @click="edit(val.guid)">修改</a> </td>
                </tr>
            </tbody>
        </table>
        </div>
        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    export default {
        name: 'WlcompanyList',
        components: {Pagination},
        data () {
            return {
                datacategory: [],
                currentPage: 1,
                totalPage: 0,
                searchName: '',
                customers:[],
                typeEmnu:[],
                type:3
            }
        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        mounted() {
            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                    that.getPageData();
                    that.getDictEmnu();
                form.on('select',function(data){
                    that[data.elem.name] = data.elem.value;
                })
            });

        },
        methods: {
            search: function() {
                this.getPageData('search');
            },
            turnPage: function(data){
                this.currentPage = data;
                this.getPageData();
            },
            getPageData: function(type = '') {
                let that = this;
                let loader = layui.layer.load();

                let postData = {};
               if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }

                postData.search = that.searchName;
                postData.types = that.type;
                $.ajax({
                    url: '/sales/Customer!list.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.flag =="success" ) {
                            //分页数据赋值
                            // that.currentPage = res.result.indexPage;
                            that.totalPage = res.result.pageCount;
                            that.customers = res.result.rows;
                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            },
            add: function () {
                this.$parent.switchPage('WlcompanyAdd');
            },
            edit: function (id) {
                this.$parent.gid = id;
                this.$parent.switchPage('WlcompanyEdit');
            },
            del: function (id) {
                let that = this;
                layer.confirm('确定要删除该数据？', function () {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Customer!unable.action',
                        type: "post",
                        data: {customerid: id},
                        dataType: "json",
                        success: function(res) {
                            if (res.msg == "success") {
                                that.toast("删除成功");
                                that.getPageData();
                            }  else {
                                that.toast('系统错误！');
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });

                })
            },
            persionSize:function (){
                return '80px'
            },
            AmountSize:function (){
                return '60px'
            },
            /**
             * 2020-3-30
             * Liukx
             * 添加管理类型
             */
            getDictEmnu: function() {
                this.$post('/sales/Customer!getDictEmnu.action')
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.typeEmnu = data.info== null?"":data.info;
                        } else {
                            this.toast('获取管理类型失败！');
                        }
                    })
            },
        }
    }
</script>
